<template>
    <div class="list">
        <div class="tit">
            <img src="@/assets/image/like.png" alt="">
            <p>猜你喜欢</p>
        </div>
        <ul class="list-con">
            <li v-for="item in likeList" :key="item.id" @click="toDetail" class="list-item">
                <img :src="item.imgUrl" alt="">
                <div class="text-con">
                    <div class="name">{{item.desc}}</div>
                    <div class="comment"><span>★★★★★</span>33952条评论</div>
                    <div class="price">
                        <div><span>￥613</span>起</div>
                        <div>通州区</div>
                    </div>
                    <div class="fot">大片世界，在此成真</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "List",
    props:{
      likeList:Array
    },
    methods: {
      toDetail() {
        this.$router.push({
          path:'/detail'
        })
      }
    },
}
</script>

<style scoped>
.list{
    padding:0 .24rem;
    border-top: solid .2rem #eee;
}
/* title */
.tit {
    display: flex;
    align-items: center;
    padding: .24rem 0;
}
.tit img {
    width: .3rem;
    height: .3rem;
    margin-right:.15rem;
}
.tit p {
    font-size: .32rem;
    color: #212121;
}
/* list */
.list-item{
    display:flex;
}
.list-item img{
    width:2rem;
    height:2rem;
    margin-right: .22rem;
}
.text-con{flex: 1;}
.text-con .name{
    margin-top: 0.26rem;
    height: 0.44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space:nowrap; */
}
.text-con .comment{
    margin-top: 0.14rem;
    height: 0.34rem;
    color: #616161;
    font-size: .24rem;
    line-height: .34rem;
}
.text-con .comment span{
    color: #ffb436;
    margin-right:.5rem;
}

.text-con .price{
    display: flex;
    justify-content: space-between;
    margin-top: 0.22rem;
    color: #616161;
    font-size: .24rem;
    line-height: .4rem;
}
.text-con .price span{
    color: #ff8300;
    font-size: .4rem;
}
.text-con .fot{
    margin-top: 0.38rem;
    margin-right: 0.24rem;
    background: #fff9f9;
    padding: 0.04rem 0.1rem;
    color: #f55;
    font-size: .24rem;
    line-height: .34rem;
}
</style>